import React, { Component } from 'react'
import {createStore} from 'redux';
import {connect} from 'react-redux';
import {userLogin,changeUseName} from '../action/login'; //这里是引入login里的方法
import mapStateToProps from '../value/mapStateToProps'//连接仓库
class Login extends Component {
  constructor (props) {   
    super(props)  
  }

  //取消事件
  handlerCancel=(e)=>{
    this.props.history.push('/') ; //路由跳转，回到首页
    
  }
  handlerLogin=(e)=>{
    console.log(this.refs.regname.value)
    this.props.userLogin({
      name:this.refs.regname.value,
      password:this.refs.regpwd.value
  })
    
  // if(!this.props.user.loginState){   
  //   this.props.history.push('/') ; //路由跳转，回到首页
  // }
  }
 
  componentDidMount=()=>{
    // 
    // 这里调用action里面的函数
   
  }
  render() { 
    var style={
      mainForm:{
        width:"500px",
        border:"1px solid #ccc",  
        backgroundColor:"#fff",  
        margin:"30px auto"
      },
      h3:{
        width:"500px",
        height:"50px",
        lineHeight:"50px",      
        backgroundColor:"#222",
        marginTop:"0px",
        paddingLeft:"20px",
        color:'white'
      },

    form :{
        padding:"30px 20px"
      }
    }
    var content=(
      <p>用户名或密码错误</p>
  ) 
  console.log('aaa',this.props.user.loginState)

    if(this.props.user.loginState){
      this.props.history.push('/') ; //路由跳转，回到首页
    }

    return (
      <div className="container" style={{width:"100%",height:"628px",backgroundImage:"url(./img/111.png)",backgroundSize:"100% 100%",backgroundRepeat:"no-repeat"}}>      
       <div className ="main-form" style={style.mainForm}>
        <h3 style={style.h3}>用户登录</h3>
        <form style={style.form}>
          <div className="form-group">
            <label htmlFor="exampleInputName1">用户名</label>
            <input type="text"  ref="regname" className="form-control" id="exampleInputName1" placeholder="username"/>
          </div>
          <div className="form-group">
            <label htmlFor="exampleInputPassword1">密码</label>
            <input type="password" ref="regpwd" className="form-control" id="exampleInputPassword1" placeholder="Password"/>
          </div>    
          <div className="checkbox" style={{marginLeft:"20px"}}>
            
          </div>
          <div className="form-group" style={{margin:"30px 0 0 150px"}} >
              <button type="submit" className="btn btn-default" onClick={this.handlerLogin } style={{marginRight:"30px"}} >登录</button>
              <button type="button" className="btn btn-default" onClick={this.handlerCancel.bind(this)}>取消</button>
          </div>
        </form>
      </div>
      </div>
    )
  }
}


//{}里为使用到的方法
export default connect(mapStateToProps,{userLogin,changeUseName})(Login);

